<template>
  <div>
    <div class="transactions-view">
      <div class="main-container">
      <el-tabs v-model="activeTabPane">
        <el-tab-pane :label="$t('tab.btc_transactions')" name="btc">
          <el-table :data="transactionData.btc" stripe>
            <el-table-column prop="transaction" label="交易"></el-table-column>
            <el-table-column prop="type" label="類型"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="status" label="狀態"></el-table-column>
            <el-table-column prop="num" label="數量"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('tab.eth_transactions')" name="eth">
          <el-table :data="transactionData.eth" stripe>
            <el-table-column prop="transaction" label="交易"></el-table-column>
            <el-table-column prop="type" label="類型"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="status" label="狀態"></el-table-column>
            <el-table-column prop="num" label="數量"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('tab.ltc_transactions')" name="ltc">
          <el-table :data="transactionData.ltc" stripe>
            <el-table-column prop="transaction" label="交易"></el-table-column>
            <el-table-column prop="type" label="類型"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="status" label="狀態"></el-table-column>
            <el-table-column prop="num" label="數量"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
        <div class="faq">
          <h4>常見問題</h4>
          <ul class="notes-list">
            <li>如何接收數位資產？</li>
            <li>從外部錢包轉移數位資產至 MaiCoin 錢包時，需要多少時間？</li>
            <li>為何從外部傳送比特幣至 MaiCoin 錢包，但一直沒收到？</li>
            <li>可以獲取新的地址嗎？舊的地址還能用嗎？</li>
          </ul>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      activeTabPane: this.$route.params.coin ? this.$route.params.coin : 'btc',
      transactionData: {
        btc: [],
        eth: [],
        ltc: []
      }
    }
  },
  computed: {
    ...mapState({
      path: state => state.route.path
    })
  },
  methods: {
  },
  watch: {
    path () {
      this.activeTabPane = this.$route.params.coin ? this.$route.params.coin : 'btc'
    }
  },
  created () {
  }
}
</script>

<style lang="less">
  .transactions-view{
    .notes-list{
      padding-left: 15px;
      li{
        list-style: disc;
        font-size: 12px;
        line-height: 135%;
        color: #666;
        padding-bottom: 5px;
      }
    }
    .faq{
      margin: 30px 0;
      border-top: 1px dashed #ccc;
      padding-top: 30px;
      h4{
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
</style>
